<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" 
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>餐饮网站-特色商品模块-俞健澄</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <style type="text/css">
    body{
    	font-family: "microsoft yahei";
    }
    .navbar-brand>img{
    height: auto;
    width:250px;
    margin-right: 5px;
    margin-top: 5px;
}

   .nav-pills>li>a{
    color:#8e908d ;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #5A9522;
}
.choose{
    border: 1px solid silver;
}

.tab-content{
    margin: 5px;
    text-align: center;
}

    </style>
	</head>
	<body>
		<!--特色推荐-->
<div class="container">
    <div class="choose">
        <div class="row">
            <div class="col-md-12">
                <div class="navbar-header hidden-xs">
                    <a class="navbar-brand" href="#"><img src="images/title.jpg" /></a>
                </div>
                <!-- 选项卡菜单 -->
                <ul class="nav nav-pills navbar-right " role="tablist" style="margin-right: 0px;">
                    <li role="presentation" class="active"><a href="#dishes"  role="tab" data-toggle="tab">菜品</a></li>
                    <li role="presentation"><a href="#drink"  role="tab" data-toggle="tab">饮品</a></li>
                    <li role="presentation"><a href="#staple"  role="tab" data-toggle="tab">主食</a></li>
                </ul>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-12">
                <div class="tab-content">
                    <!--菜品-->
                    <div role="tabpanel" class="tab-pane active" id="dishes">
                        <div class=" col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small01.jpg"/>
                            <p>菜品</p>
                            <p>￥145.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small02.jpg"/>
                            <p>菜品</p>
                            <p>￥165.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small04.jpg"/>
                            <p>菜品</p>
                            <p>￥165.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small02.jpg"/>
                            <p>菜品</p>
                            <p>￥165.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small07.jpg"/>
                            <p>菜品</p>
                            <p>￥145.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small08.jpg"/>
                            <p>菜品</p>
                            <p>￥165.0</p>
                        </div>
                    </div>

                    <!--饮品-->
                    <div role="tabpanel" class="tab-pane" id="drink">
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small03.jpg"/>
                            <p>饮品</p>
                            <p>￥18.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small03.jpg"/>
                            <p>饮品</p>
                            <p>￥28.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small03.jpg"/>
                            <p>饮品</p>
                            <p>￥38.0</p>
                        </div>
                    </div>
                    <!--</div>-->
                    <!--主食-->
                    <div role="tabpanel" class="tab-pane" id="staple">
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small05.jpg"/>
                            <p>主食</p>
                            <p>￥56.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small06.jpg"/>
                            <p>主食</p>
                            <p>￥56.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small09.jpg"/>
                            <p>主食</p>
                            <p>￥56.0</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--特色推荐结束-->
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
	</body>
</html>
